<div ng-controller="playStepController" class="step play-step panel panel-default">
	<div class="panel-heading">
		<step-heading></step-heading>
	</div>
	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<form name="form" novalidate>
			<div class='form-group row'>
				<!-- <div lookup-context class="col-md-12"> -->
				<div class="col-md-12">
					<label>{{'playStepUrlFileLabel' | translate}}</label>
					<div class="input-group">
						<span class='input-group-addon'>{{'Media resource' | translate}}</span>
						<span class="input-group-addon">
							<span title="{{'playStepUrlFileInProjectTitle' | translate}}">{{'playStepUrlFileInProjectRadio' | translate}} &nbsp;</span>
							<input ng-model='step.playType' value='local' type="radio">
						</span>
						<span class="input-group-addon">
							<span title="{{'playStepUrlFileBundleUrlTitle' | translate}}">{{'playStepUrlFileBundleUrlRadio' | translate}} &nbsp;</span>
							<input ng-model='step.playType' value='remote' type="radio">
						</span>
						<select name='wavLocalFilename' ng-show='step.playType=="local"' ng-model='step.local.wavLocalFilename' ng-options='wavItem.filename as wavItem.filename for wavItem in project.wavList' class="form-control" required></select>

						<!--
						<input  name='wavUrl' ng-show='step.playType=="remote"' null-if-empty ng-model='step.remote.wavUrl' lookup-target type='text' required class='form-control' placeholder="{{'playStepUrlFileInputPlaceholder' | translate}}"/>
						<variable-lookup variable="step.remote.wavUrl" view="input-group" ng-show='step.playType=="remote"'></variable-lookup>
						-->
						<input  name='wavUrl' ng-show='step.playType=="remote"' null-if-empty ng-model='step.remote.wavUrl' type='text' required class='form-control' placeholder='http://remoteserver/hello.wav'/>
						<div ng-show='step.playType=="remote"' class="input-group-btn">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Select a bundled .wav resource">
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu scrollable-menu" role="menu">
								<li ng-repeat="bundledWav in bundledWavs">
									<a ng-click='selectBundledWav(step, bundledWav.url)'>{{bundledWav.filename}}</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="validation-error" ng-show="step.playType=='remote' && form.wavUrl.$invalid">{{'playStepUrlFileError1' | translate}}</div>
					<div class="validation-error" ng-show="step.playType=='local' && form.wavLocalFilename.$invalid">{{'playStepUrlFileError2' | translate}}</div>
				</div>
			</div>

			<div class="row">
				<div class='col-md-12'>
					<i ng-click='step.iface.optionsVisible = !step.iface.optionsVisible' class='fa fa-cog rvd-clickable' ng-class="{'rvd-active': step.iface.optionsVisible }"></i>
					<div collapse='!step.iface.optionsVisible'>
						<br/>
						<div class="input-group loop">
							<span class='input-group-addon help-tooltip' tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'playStepLoopTooltip' | translate}}">{{'playStepLoopLabel' | translate}}</span>
							<input ng-model='step.loop' auto-clear type='number' class='form-control' placeholder="{{'playStepLoopPlaceholder' | translate}}" />
						</div>
						<div ng-show="step.loop==0" class="validation-warning"><i class="fa fa-warning step-warning-icon"></i> {{'playStepLoopNeverendingWarning' | translate}}</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
